/* 设置总体样式 */
body {
    font-family: Arial, sans-serif;/* 设置字体为宋体，无衬线字体 */
    margin: 20px;/* 设置外边距为20px */
    background-color: #f5f5f5;/* 设置背景颜色 */
}

/* 设置最大的div盒子样式 */
.container {
    background: white;/* 设置背景色 */
    padding: 20px;/* 设置内边距为20px */
    border-radius: 8px;/* 设置元素的外边框为圆角 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);/* 设置阴影效果，水平偏移量为0，垂直偏移量为2px(阴影会在盒子的正下方)，模糊半径为4px，扩散半径未设置，默认为0，不向外扩散，颜色为黑色，透明度是0.1 */
}

/* 设置搜索栏的样式 */
.search-bar {
    display: flex;/* 设置搜索栏为弹性布局 */
    justify-content: space-between;/* 设置主轴对齐方式：弹性盒子沿主轴均匀排列 */
    margin-bottom: 20px;/* 下方外边距设置为20px */
}

/* 设置search-group搜索栏下的输入框样式 */
.search-group input {
    padding: 8px;/* 设置内边距为8px */
    margin-right: 10px;/* 设置右外边距为10px */
    width: 200px;/* 设置输入框宽度为200px */
}

/* 设置表格样式 */
table {
    width: 100%;/* 宽度占比100% */
    border-collapse: collapse;/* 设置表格的边框是合并的，若设置为separate则是默认的边框是分开的 */
    margin-bottom: 20px;/* 设置下外边距为20px */
}

/* 同时设置表格 th 和 td 的样式 */
th, td {
    border: 1px solid #ddd;/* 设置边框线条为1px，实线，颜色为 #ddd */
    padding: 12px;/* 设置单元格内边距为12px */
    text-align: center;/* 设置文本水平对齐方式为: 左右居中 */
    vertical-align: middle;/* 设置文本垂直对齐方式为: 上下居中 */
}

/* 额外单独设置表格 th 表头的样式 */
th {
    background-color: #f8f9fa;/* 设置表头单元格背景色 */
    font-weight: bold;/* 设置字体加粗 */
}

/* 设置按钮统一样式 */
button {
    padding: 8px 16px;/* 设置内边距为上下8px，左右16px */
    background-color: #409eff;/* 设置按钮背景颜色为蓝色 */
    color: white;/* 设置字体文本颜色为白色 */
    border: none;/* 设置无边框 */
    border-radius: 4px;/* 设置按钮四个角为圆角 */
    cursor: pointer;/* 设置光标的类型，即当鼠标指针悬停在元素上时显示相应样式 */
    transition: opacity 0.3s;/* 设置按钮的透明度变化过渡效果，0.3秒完成过渡 */
}

/* 设置按钮，当鼠标悬停时的颜色 */
button:hover {
    background-color: #66b1ff;/* 设置鼠标悬停时的按钮背景颜色 */
}

/* 设置按钮不可点击时的样式 */
button:disabled {
    background-color: #c0c4cc;/* 设置按钮背景颜色为灰色 */
    cursor: not-allowed;/* 设置鼠标悬停时光标类型，为: 不允许操作 */
    opacity: 0.5;/* 设置透明度为0.5 */
}

/* 设置新增患者按钮的样式 */
.add-btn {
    background-color: #67c23a;/* 设置按钮背景颜色为绿色 */
}

/* 设置分页控件盒子的样式 */
.pagination {
    display: flex;/* 设置容器为弹性容器 */
    align-items: center;/* 设置侧轴(垂直方向)对齐方式: 居中 */
    gap: 10px;/* 设置弹性容器内的子元素之间的距离为10px */
}

/* 设置分页控件中间盒子的样式 */
#pageInfo {
    margin: 0 15px;/* 设置外边距为上下0，左右15px */
    color: #606266;/* 设置字体颜色 */
}

/* 模态框样式 */
.modal-mask {
    position: fixed;/* 将元素固定在浏览器视口（屏幕可见区域）的指定位置，脱标 */
    top: 0;/* 距上侧距离0 */
    left: 0;/* 距左侧距离0 */
    width: 100%;/* 宽度为父级的100% */
    height: 100%;/* 高度为父级的100% */
    background: rgba(0,0,0,0.8);/* 设置背景颜色为黑色，透明度为0.8 */
    display: flex;/* 设置为弹性容器 */
    justify-content: center;/* 设置主轴对齐方式为: 居中 */
    align-items: center;/* 设置侧轴对齐方式为: 居中 */
    z-index: 2000;/* 设置堆叠层级为2000，改变定位元素的显示顺序，默认值为0，值越大，层级越高，越靠上 */
}

/* 设置模态框中图片盒子的样式 */
.modal-content {
    position: relative;/* 设置定位为相对定位（子绝父相） */
    max-width: 90%;/* 设置最大宽度为90% */
    max-height: 90%;/* 设置最大高度为90% */
}

/* 设置模态框中图片的样式 */
.full-photo {
    max-width: 100%;/* 设置宽度不超过父级容器 */
    max-height: 80vh;/* 设置高度不超过视口高度的80% */
    border-radius: 8px;/* 设置图片盒子四个角为圆角 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);/* 设置盒子阴影样式 */
}

/* 设置表格中照片单元格样式 */
.photo-cell {
    min-width: 100px;/* 设置最小宽度为100px */
    height: 60px;/* 设置高度为60px */
}

/* 设置弹窗总体样式 */
.dialog-mask {
    position: fixed;/* 设置定位为固定定位 */
    top: 0;/* 距上侧距离0 */
    left: 0;/* 距左侧距离0 */
    width: 100%;/* 宽度为父级的100% */
    height: 100%;/* 高度为父级的100% */
    background: rgba(0,0,0,0.5);/* 设置背景颜色为黑色，透明度为0.5 */
    display: flex;/* 设置为弹性容器 */
    justify-content: center;/* 设置主轴对齐方式为居中 */
    align-items: center;/* 设置侧轴对齐方式为居中 */
    z-index: 1000;/* 设置堆叠层级为1000，改变定位元素的显示顺序，默认值为0，值越大，层级越高，越靠上 */
}

.dialog-content {
    background: white;
    border-radius: 8px;
    width: 400px;
}

.dialog-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    cursor: pointer;
    font-size: 24px;
}

.dialog-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
    display: flex; /* 新增 */
    align-items: center; /* 垂直居中 */
}

.form-group label {
    width: 80px;
    text-align: right;
    margin-right: 10px;
    flex-shrink: 0; /* 禁止标签被压缩 */
}

.form-group input,
.form-group select {
    font-size: 14px !important;
    color: #606266 !important;
    width: 250px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group select {
    appearance: none;
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")
    no-repeat right 8px center/15px auto;
    padding: 6px 25px 6px 12px !important; /* 调整内边距 */
}

/* 上传按钮样式 */
.upload-btn {
    padding: 8px 16px;
    background-color: #409eff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;

    /* 新增居中样式 */
    display: inline-flex; /* 或 inline-block */
    justify-content: center;
    align-items: center;
    width: 100px; /* 固定宽度（可选） */
}

.upload-btn:hover {
    background-color: #66b1ff;
}

/* 预览图样式 */
#photoPreview {
    border: 1px solid #ddd;
    border-radius: 4px;
    object-fit: cover;
}

.form-group > div { /* 控制照片上传区域的容器 */
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 元素间距 */
    flex-wrap: nowrap; /* 禁止换行 */
}

#photoPreview {
    flex-shrink: 0; /* 禁止图片缩小 */
}

/* 新增专用容器类 */
.photo-upload-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* 确保按钮和图片横向排列 */
.upload-btn {
    order: 1; /* 按钮在前 */
    flex-shrink: 0; /* 禁止按钮缩小 */
}

#photoPreview {
    width: 80px; /* 固定宽度 */
    height: 80px; /* 固定高度 */
    border: 1px solid #ddd;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

#editPhotoPreview {
    width: 80px;        /* 固定宽度 */
    height: 80px;       /* 固定高度 */
    border: 1px solid #ddd;       /* 边框样式 */
    border-radius: 4px;           /* 圆角一致 */
    object-fit: cover;            /* 保持比例裁剪 */
    flex-shrink: 0;
}

.dialog-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #eee;
}

.confirm-btn {
    background-color: #67c23a;
    margin-left: 10px;
}

/* 在style.css中添加（确保分页按钮样式正确） */
#prevPage, #nextPage {
    min-width: 80px;
    padding: 8px 16px;
}

#prevPage:disabled, #nextPage:disabled {
    background-color: #c0c4cc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* 鼠标悬停时设置背景为灰色 */
#patientTable tr {
    transition: background-color 0.3s ease; /* 添加过渡动画 */
}

#patientTable tr:hover {
    background-color: #f5f7fa; /* 悬停时的灰色背景 */
    cursor: pointer; /* 鼠标变为手型 */
}

/* 就诊记录表格样式 */
#consultDialog table {
    width: 100%;
    margin-bottom: 15px;
}

#consultDialog th {
    background-color: #f8f9fa;
    padding: 12px;
}

#consultDialog td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

#consultDialog .dialog-footer {
    margin-top: 15px;
}

/* 添加就诊分页控件的禁用样式 */
#consultDialog .pagination button:disabled {
    background-color: #c0c4cc;
    cursor: not-allowed;
    opacity: 0.6;
}

#consultDialog table tr {
    transition: background-color 0.3s ease;
}

/* 整行悬停 */
#consultDialog tr.consult-cell:hover {
    background-color: #f5f7fa;
    cursor: pointer;
}

/* 整行激活状态 */
#consultDialog tr.consult-cell.active {
    background-color: #e6f7ff !important;
}

#patientTable tr.active {
    background-color: #e6f7ff !important;
    transition: background-color 0.3s ease;
}

/* 在style.css中追加以下样式 */
#detailDialog table {
    border-collapse: collapse;
}

#detailDialog th {
    background-color: #f8f9fa;
    padding: 12px 8px;
    text-align: center;
}

#detailDialog td {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
}

#detailDialog tr:hover {
    background-color: #f5f7fa;
}

#addConsultDialog .region-select {
    width: 90%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#addConsultDialog .count-input {
    width: 80px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#totalCount {
    color: #666;
    font-size: 14px;
    align-self: center;
}

/* 缩略图样式 */
.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.thumbnail:hover {
    transform: scale(1.05);
}

/* 无照片提示 */
.no-photo {
    color: #999;
    font-size: 14px;
}

/* 错误提示样式 */
.image-error {
    color: #ff4d4f;
    font-size: 12px;
    text-align: center;
}

/* 加载失败提示 */
.load-fail-tip {
    color: #ff4d4f;  /* 红色字体 */
    font-size: 12px;
    display: block;
    text-align: center;
    padding: 5px;
    border: 1px solid #ffccc7; /* 浅红色边框 */
    background: #fff2f0;      /* 浅红色背景 */
    border-radius: 4px;
}

/* 图片容器 */
.photo-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 多选下拉框样式 */
#addRegion {
    width: 100%;
    height: 100px; /* 固定高度显示多选 */
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    -webkit-appearance: none; /* 移除默认样式 */
}

#addRegion option {
    padding: 5px;
}

#addRegion option:checked {
    background: #409eff;
    color: white;
}

/* 文本域样式 */
textarea {
    resize: vertical;
    min-height: 60px;
}

/* 多选下拉框容器 */
.multi-select-wrapper {
    width: 100%;
    position: relative;
}

/* 多选提示 */
.multi-select-wrapper::after {
    display: none !important;
}

/* 修改后的CSS */
#addRemark {
    font-family: inherit !important;          /* 显式继承 */
    color: inherit !important;                /* 显式继承 */
    resize: none !important;/* 禁止拖动调整大小 */
    width: 250px !important;
    height: 60px !important;
    padding: 8px;           /* 与其他输入框一致 */
    line-height: 1.5;       /* 标准行高 */
    border: 1px solid #ddd;
    border-radius: 4px;
}

#editRemark {
    resize: none !important;/* 禁止拖动调整大小 */
    width: 250px !important;
    height: 60px !important;
    padding: 8px;           /* 与其他输入框一致 */
    line-height: 1.5;       /* 标准行高 */
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 新增自定义多选样式 */
.custom-multi-select {
    display: flex !important;
    align-items: center !important;  /* 垂直居中 */
    width: 250px !important;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid #ddd !important; /* 添加边框 */
    border-radius: 4px;
    position: relative;
    background: white;
    cursor: pointer;
}

.options-container {
    width: 250px !important;
    max-height: 200px; /* 限制最大高度 */
    overflow-y: auto;  /* 添加垂直滚动条 */
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;     /* 确保在弹窗之上 */
    background: white;
    display: none;      /* 默认隐藏 */
}

.option-item {
    padding: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.option-item:hover {
    background: #f5f7fa;
}

.option-item.selected {
    background: #409eff;
    color: white;
}

.dropdown-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* 统一所有输入控件宽度 */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
.custom-multi-select {      /* 新增自定义多选框 */
    font-family: Arial, sans-serif !important;  /* 与全局字体一致 */
    font-size: 14px !important;                /* 标准字号 */
    color: #333 !important;                    /* 标准文字颜色 */
    line-height: 1.5 !important;               /* 标准行高 */
    height: 33.33px !important;      /* 强制统一标准高度 */
    min-height: 0 !important;       /* 覆盖原有 min-height */
    width: 250px !important;
    box-sizing: border-box; /* 包含padding和border */
}

/* 添加滚动条样式 */
.options-container::-webkit-scrollbar {
    width: 6px;
}

.options-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.options-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

/* 修改部位提示文本样式 */
.custom-multi-select .selected-regions {
    font-size: 14px !important;    /* 调整为与性别下拉相同字号 */
    font-weight: normal !important; /* 移除加粗 */
    color: #606266 !important;     /* 调整为灰色（可选） */
}

/* 统一占位符文本样式 */
::placeholder {
    color: #999 !important;                   /* 灰色提示文本 */
    opacity: 1 !important;                    /* 修复 Firefox 的透明度问题 */
}

/* 编辑弹窗专属样式 */
#editRegionOptions .option-item {
    padding: 8px;
}

#editRegionOptions .option-item.selected {
    background: #409eff;
    color: white;
}

#editSelectedRegions {
    font-size: 14px;
    color: #606266;
    flex-grow: 1;
}

/* 统一自定义下拉框的激活状态 */
.custom-multi-select.active {
    border-color: #101010 !important;
    box-shadow: 0 0 3px rgba(64, 158, 255, 0.3);
}

/* 统一所有输入框的聚焦样式 */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.custom-multi-select.active {
    border-width: 2px !important;  /* 加粗边框 */
    border-color: #101010 !important;
}

/* 确保编辑弹窗与新增样式一致 */
#editConsultDialog .region-select,
#editConsultDialog .count-input {
    width: 90%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#editConsultDialog .dialog-content {
    background: white;
    border-radius: 8px;
}